<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import gdjdService from '@/api/gdjd'
import { TableItem } from '@/api/common'
import tableBox from '@/components/queryTable/table/index.vue'
import dayjs from 'dayjs'
import jdbgDialog from '@/views/gdjd/jdtj/dialogs/jdbg-dialog.vue'

// 生命周期
onMounted(async () => {
  // 分页
  changePageNum(1)
})

/*
 * 查询列表数据
 */
// 监督报告
const form = ref<any>({
  pageSize: 20,
  pageNum: 1,
  filter: {
    jdbgscksrq: '', // 开始时间
    jdbgscjsrq: '', // 结束时间
  },
})

// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: [
    {
      label: '名称',
      prop: 'jdbgmc',
      width: null,
      custom: true,
      dqfs: 'left',
    },
    { label: '创建时间', prop: 'jdbgscrq', width: null, dqfs: 'left' },
    { label: '创建用户', prop: 'cjrxm', width: null, dqfs: 'left' },
  ],
})

/**
 * @描述: 表格相关
 */
const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
    // exportParams: {
    //   url: `${window.IPCONFIG}/api/gdgl/queryWtjList`,
    //   wjmc: '案件归档-未提交.xls',
    // },
  }
})

// 办结日期
const createTime = ref([new Date(new Date().getFullYear(), 0, 1), new Date()])

const loading = ref<boolean>(false)
const queryTable = (refresh?: boolean) => {
  const params = {
    ...form.value,
    filter: {
      jdbgscksrq: createTime.value.length ? dayjs(createTime.value[0]).format('YYYY-MM-DD') : '', // 开始时间
      jdbgscjsrq: createTime.value.length ? dayjs(createTime.value[1]).format('YYYY-MM-DD') : '', // 结束时间
    },
  }
  loading.value = true
  gdjdService
    .queryJdbglb(params)
    .then((res) => {
      tableData.value.data = res.data.list
      total.value = res.data.total
      if (refresh) ElMessage({ type: 'success', message: '刷新成功' })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 表格选择
 */
const multipleSelection = ref<any[]>([])
const selectionChange = (val: any[]) => {
  multipleSelection.value = val
}

// 页码发生改变时
const changePageNum = (val: number) => {
  form.value.pageNum = val
  queryTable()
}

// 页条数发生改变时
const changeSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  queryTable()
}

/*
 * 删除报告
 */
const deleteJdbg = () => {
  ElMessageBox.confirm('是否删除选中的数据?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      jdbgbhList: multipleSelection.value.map((el) => el.jdbgbh),
    }
    gdjdService
      .deleteJdbg(params)
      .then(() => {
        ElMessage({ type: 'success', message: '删除成功' })
        queryTable()
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  })
}

/*
 * 查看监督报告（打开弹窗）
 */

const tableBoxRef = ref<InstanceType<typeof tableBox>>()
const rowClick = (row: any) => {
  if (multipleSelection.value?.includes(row)) {
    tableBoxRef.value?.refTable.toggleRowSelection(row, false)
  } else {
    tableBoxRef.value?.refTable.toggleRowSelection(row, true)
  }
}

/*
 * 点击案件名称进入归档
 */
const jdbgRef = ref<InstanceType<typeof jdbgDialog>>()
const checkRow = (row: any) => {
  jdbgRef.value?.openDialog(row)
}
</script>
<template>
  <div class="container">
    <div class="form-box">
      <el-form :model="form" ref="filterFormRef" inline label-width="100px">
        <el-form-item label="办结日期:">
          <el-date-picker
            style="width: 240px"
            v-model="createTime"
            type="daterange"
            start-placeholder="请选择开始日期"
            end-placeholder="请选择结束日期"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item class="search">
          <el-button type="primary" @click="() => queryTable()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="submit-list">
      <div>
        <button class="btn_operation" @click="deleteJdbg" :disabled="!multipleSelection.length">
          <div class="btn-deletescaj"></div>
          删除
        </button>
        <button class="btn_operation" @click="() => queryTable(true)">
          <div class="btn-refresh"></div>
          刷新
        </button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table" v-loading="loading">
      <table-box
        gnbm="jdbb"
        ref="tableBoxRef"
        :tableData="tableData"
        :selectShow="true"
        :showExport="false"
        :changeHeader="false"
        :getTableDataParam="page"
        :formParams="form"
        @selectionChange="selectionChange"
        @changeCurrent="changePageNum"
        @changeSize="changeSize"
        @rowClick="rowClick"
      >
      </table-box>
    </div>
    <!-- 监督报告 -->
    <jdbg-dialog ref="jdbgRef"></jdbg-dialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .form-box {
    // padding: 10px 0 0 0;
    border-bottom: 1px solid #dae4f1;
    margin-bottom: 10px;

    .el-form {
      display: flex;
      justify-content: space-between;

      .el-form-item.search {
        margin-right: 0px;
      }
    }
  }

  .submit-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .active-img {
    cursor: pointer;
    float: left;
  }
  .active-img + .active-img {
    margin-left: 10px;
  }

  .table {
    flex: 1;
    flex-shrink: 0;
    overflow: auto;
  }
}
</style>
